<!--
 * @FilePath     : /study_code/vue2.x/createElement2 copy.html
 * @Description  : 第2参数，ref, refInfo
 * @Date         : 2025-05-03 10:32:01
 * @Author       : Fang YingGui
 * @LastEditors  : fangyinggui 18715384437@163.com
 * @LastEditTime : 2025-05-03 10:32:06
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
    <link rel="stylesheet" href="" />
  </head>
  <body>
    <div id="app">
      <my-component></my-component>
      <my-component2></my-component2>
    </div>

    <script src="/vue/dist/vue.min.js"></script>
    <script src="./common.js"></script>
    <script>
      const myComponent = {
        data: function () {
          return {}
        },
        mounted() {
          console.log(this.$refs)
        },
        render: function (createElement) {
          return createElement(
            'div',
            {
              /**
               * @key ref
               * @brief: 设置当前节点的 ref 属性值
               * #作用：可通过 this.$refs.xxx 来访问此值
               *
               * @key refInFor
               * @brief: 是否以数组展示 this.$refs 查找到的节点
               * @value
               * false （默认值）this.$refs 以对象格式保存最后一个 ref 为目标值的 DOM节点对象；
               * true this.$refs 以数组格式保存 节点对象；
               * !如果你在渲染函数中给多个元素都应用了相同的 ref 名，那么 `$refs.myRef` 会变成一个数组。（需要 refInFor 值为 true）
               * 可注释此处 & 下面另一组件中的 refInFor 值可以检验下获取到的结果）
               */
              ref: 'myRef',
              refInFor: true,
            },
            ['父节点']
          )
        },
      }

      const myComponent2 = {
        data: function () {
          return {}
        },
        mounted() {
          console.log('1', this.$refs.parent.childNodes)
          console.log('2', this.$refs)
        },
        render: function (createElement) {
          return createElement(
            'div',
            {
              ref: 'parent',
            },
            Array.apply(null, { length: 10 }).map(function () {
              return createElement(
                'p',
                {
                  attrs: {
                    name: 'his',
                  },
                  ref: 'hi',
                  refInFor: true,
                },
                'hi'
              )
            })
          )
        },
      }

      var app = new Vue({
        el: '#app',
        data: function () {
          return {}
        },
        components: {
          myComponent,
          myComponent2,
        },
      })
    </script>
  </body>
</html>
